<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="scss">

#app {
  position: relative;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;

  .container-router-view {
    height: 100%;
  }
}


@media all and (min-width: 768px) {
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(130, 130, 130, 0.5);
    background: rgba(132, 132, 132, 0.5);
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 1px #000000;
    border-radius: 8px;
    background: #ffffff;
  }
}
</style>
